<template>
  <div class="app-container">
    <el-card class="monitor-card" shadow="hover">
      <div slot="header" class="card-header">
        <span><i class="el-icon-monitor"></i> 服务器监控</span>
        <div class="card-header-right">
          <el-button 
            type="primary" 
            size="mini" 
            icon="el-icon-refresh" 
            @click="getList" 
            :loading="loading"
          >刷新</el-button>
        </div>
      </div>

      <el-row :gutter="20">
        <el-col :span="12" class="card-box">
          <el-card shadow="never">
            <div slot="header" class="inner-card-header">
              <span><i class="el-icon-cpu"></i> CPU</span>
            </div>
            <div class="el-table el-table--enable-row-hover el-table--medium">
              <table cellspacing="0" style="width: 100%;">
                <thead>
                  <tr>
                    <th class="is-leaf"><div class="cell">属性</div></th>
                    <th class="is-leaf"><div class="cell">值</div></th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td><div class="cell">核心数</div></td>
                    <td><div class="cell" v-if="server.cpu">{{ server.cpu.cpuNum }}</div></td>
                  </tr>
                  <tr>
                    <td><div class="cell">用户使用率</div></td>
                    <td>
                      <div class="cell" v-if="server.cpu">
                        <el-progress :text-inside="true" :stroke-width="18" :percentage="parseFloat(server.cpu.used)" 
                          :status="server.cpu.used > 80 ? 'exception' : 'normal'"></el-progress>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td><div class="cell">系统使用率</div></td>
                    <td>
                      <div class="cell" v-if="server.cpu">
                        <el-progress :text-inside="true" :stroke-width="18" :percentage="parseFloat(server.cpu.sys)" 
                          :status="server.cpu.sys > 80 ? 'exception' : 'normal'"></el-progress>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td><div class="cell">当前空闲率</div></td>
                    <td>
                      <div class="cell" v-if="server.cpu">
                        <el-progress :text-inside="true" :stroke-width="18" :percentage="parseFloat(server.cpu.free)" 
                          status="success"></el-progress>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </el-card>
        </el-col>
  
        <el-col :span="12" class="card-box">
          <el-card shadow="never">
            <div slot="header" class="inner-card-header">
              <span><i class="el-icon-coin"></i> 内存</span>
            </div>
            <div class="el-table el-table--enable-row-hover el-table--medium">
              <table cellspacing="0" style="width: 100%;">
                <thead>
                  <tr>
                    <th class="is-leaf"><div class="cell">属性</div></th>
                    <th class="is-leaf"><div class="cell">内存</div></th>
                    <th class="is-leaf"><div class="cell">JVM</div></th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td><div class="cell">总内存</div></td>
                    <td><div class="cell" v-if="server.mem">{{ server.mem.total }}G</div></td>
                    <td><div class="cell" v-if="server.jvm">{{ server.jvm.total }}M</div></td>
                  </tr>
                  <tr>
                    <td><div class="cell">已用内存</div></td>
                    <td><div class="cell" v-if="server.mem">{{ server.mem.used}}G</div></td>
                    <td><div class="cell" v-if="server.jvm">{{ server.jvm.used}}M</div></td>
                  </tr>
                  <tr>
                    <td><div class="cell">剩余内存</div></td>
                    <td><div class="cell" v-if="server.mem">{{ server.mem.free }}G</div></td>
                    <td><div class="cell" v-if="server.jvm">{{ server.jvm.free }}M</div></td>
                  </tr>
                  <tr>
                    <td><div class="cell">使用率</div></td>
                    <td>
                      <div class="cell" v-if="server.mem">
                        <el-progress :text-inside="true" :stroke-width="18" :percentage="parseFloat(server.mem.usage)" 
                          :status="server.mem.usage > 80 ? 'exception' : 'normal'"></el-progress>
                      </div>
                    </td>
                    <td>
                      <div class="cell" v-if="server.jvm">
                        <el-progress :text-inside="true" :stroke-width="18" :percentage="parseFloat(server.jvm.usage)" 
                          :status="server.jvm.usage > 80 ? 'exception' : 'normal'"></el-progress>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </el-card>
        </el-col>
  
        <el-col :span="24" class="card-box">
          <el-card shadow="never">
            <div slot="header" class="inner-card-header">
              <span><i class="el-icon-s-platform"></i> 服务器信息</span>
            </div>
            <el-table :data="[{}]" style="width: 100%" :show-header="false" 
              border :cell-style="{padding: '8px'}">
              <el-table-column>
                <template slot-scope="scope">
                  <div class="server-info-item">服务器名称</div>
                </template>
              </el-table-column>
              <el-table-column>
                <template slot-scope="scope">
                  <div v-if="server.sys">{{ server.sys.computerName }}</div>
                </template>
              </el-table-column>
              <el-table-column>
                <template slot-scope="scope">
                  <div class="server-info-item">操作系统</div>
                </template>
              </el-table-column>
              <el-table-column>
                <template slot-scope="scope">
                  <div v-if="server.sys">{{ server.sys.osName }}</div>
                </template>
              </el-table-column>
            </el-table>
            <el-table :data="[{}]" style="width: 100%; margin-top: -1px" :show-header="false" 
              border :cell-style="{padding: '8px'}">
              <el-table-column>
                <template slot-scope="scope">
                  <div class="server-info-item">服务器IP</div>
                </template>
              </el-table-column>
              <el-table-column>
                <template slot-scope="scope">
                  <div v-if="server.sys">{{ server.sys.computerIp }}</div>
                </template>
              </el-table-column>
              <el-table-column>
                <template slot-scope="scope">
                  <div class="server-info-item">系统架构</div>
                </template>
              </el-table-column>
              <el-table-column>
                <template slot-scope="scope">
                  <div v-if="server.sys">{{ server.sys.osArch }}</div>
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </el-col>
  
        <el-col :span="24" class="card-box">
          <el-card shadow="never">
            <div slot="header" class="inner-card-header">
              <span><i class="el-icon-s-operation"></i> Java虚拟机信息</span>
            </div>
            <el-table :data="[{}]" style="width: 100%" :show-header="false" 
              border :cell-style="{padding: '8px'}">
              <el-table-column>
                <template slot-scope="scope">
                  <div class="server-info-item">Java名称</div>
                </template>
              </el-table-column>
              <el-table-column>
                <template slot-scope="scope">
                  <div v-if="server.jvm">{{ server.jvm.name }}</div>
                </template>
              </el-table-column>
              <el-table-column>
                <template slot-scope="scope">
                  <div class="server-info-item">Java版本</div>
                </template>
              </el-table-column>
              <el-table-column>
                <template slot-scope="scope">
                  <div v-if="server.jvm">{{ server.jvm.version }}</div>
                </template>
              </el-table-column>
            </el-table>
            <el-table :data="[{}]" style="width: 100%; margin-top: -1px" :show-header="false" 
              border :cell-style="{padding: '8px'}">
              <el-table-column>
                <template slot-scope="scope">
                  <div class="server-info-item">启动时间</div>
                </template>
              </el-table-column>
              <el-table-column>
                <template slot-scope="scope">
                  <div v-if="server.jvm">{{ server.jvm.startTime }}</div>
                </template>
              </el-table-column>
              <el-table-column>
                <template slot-scope="scope">
                  <div class="server-info-item">运行时长</div>
                </template>
              </el-table-column>
              <el-table-column>
                <template slot-scope="scope">
                  <div v-if="server.jvm">{{ server.jvm.runTime }}</div>
                </template>
              </el-table-column>
            </el-table>
            <el-table :data="[{}]" style="width: 100%; margin-top: -1px" :show-header="false" 
              border :cell-style="{padding: '8px'}">
              <el-table-column width="150px">
                <template slot-scope="scope">
                  <div class="server-info-item">安装路径</div>
                </template>
              </el-table-column>
              <el-table-column span="3">
                <template slot-scope="scope">
                  <div v-if="server.jvm">{{ server.jvm.home }}</div>
                </template>
              </el-table-column>
            </el-table>
            <el-table :data="[{}]" style="width: 100%; margin-top: -1px" :show-header="false" 
              border :cell-style="{padding: '8px'}">
              <el-table-column width="150px">
                <template slot-scope="scope">
                  <div class="server-info-item">项目路径</div>
                </template>
              </el-table-column>
              <el-table-column span="3">
                <template slot-scope="scope">
                  <div v-if="server.sys">{{ server.sys.userDir }}</div>
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </el-col>
  
        <el-col :span="24" class="card-box">
          <el-card shadow="never">
            <div slot="header" class="inner-card-header">
              <span><i class="el-icon-folder"></i> 磁盘状态</span>
            </div>
            <el-table
              v-if="server.sysFiles"
              :data="server.sysFiles"
              style="width: 100%"
              border
              stripe
              :header-cell-style="{backgroundColor: '#f5f7fa', color: '#333'}"
            >
              <el-table-column prop="dirName" label="盘符路径" />
              <el-table-column prop="sysTypeName" label="文件系统" />
              <el-table-column prop="typeName" label="盘符类型" />
              <el-table-column prop="total" label="总大小" />
              <el-table-column prop="free" label="可用大小" />
              <el-table-column prop="used" label="已用大小" />
              <el-table-column label="已用百分比">
                <template slot-scope="scope">
                  <el-progress 
                    :text-inside="true" 
                    :stroke-width="18" 
                    :percentage="parseFloat(scope.row.usage)" 
                    :status="scope.row.usage > 80 ? 'exception' : scope.row.usage > 60 ? 'warning' : 'success'"
                  ></el-progress>
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import { getServer } from "@/api/monitor/server";

export default {
  name: "Server",
  data() {
    return {
      // 加载状态
      loading: false,
      // 服务器信息
      server: []
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询服务器信息 */
    getList() {
      this.loading = true;
      getServer().then(response => {
        this.server = response.data;
        this.loading = false;
      }).catch(() => {
        this.loading = false;
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.app-container {
  padding: 20px;
  
  .monitor-card {
    margin-bottom: 20px;
    border-radius: 5px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
    
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      
      i {
        margin-right: 8px;
        color: #409EFF;
      }
      
      span {
        font-size: 16px;
        font-weight: 600;
      }
      
      .card-header-right {
        margin-left: auto;
      }
    }
    
    .inner-card-header {
      padding: 0;
      font-weight: bold;
      display: flex;
      align-items: center;
      
      i {
        margin-right: 8px;
        color: #409EFF;
      }
    }
  }
  
  .card-box {
    margin-bottom: 20px;
    
    .text-danger {
      color: #F56C6C;
    }
    
    .server-info-item {
      font-weight: bold;
      color: #606266;
    }
  }
  
  ::v-deep .el-progress-bar__innerText {
    color: #ffffff;
  }
  
  ::v-deep .el-table th {
    font-weight: bold;
    color: #303133;
    background-color: #f5f7fa;
  }
  
  ::v-deep .el-card {
    border-radius: 5px;
    
    &.is-always-shadow {
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
    }
    
    .el-card__header {
      padding: 15px 20px;
      border-bottom: 1px solid #f0f0f0;
    }
    
    .el-card__body {
      padding: 20px;
    }
  }
}
</style>